<template>
  <!-- 网络访问信息  -->
  <div>
    <div class="configuration-situation">
      <div class="left">
        <div class="con-title">
          <span>网络访问地址统计</span>
          <div>
            <el-select v-model="intDateType" size="mini" placeholder="近一周" @change="changeTime('netAddress')">
              <el-option v-for="i in dateSel" :key="i.value" :label="i.label" :value="i.value" />
            </el-select>
            <el-date-picker
              v-if="intDateType == '4'"
              v-model="intPickTime"
              size="mini"
              type="daterange"
              clearable
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              style="margin-left: 10px"
              @change="changeTime('netAddress')" />
          </div>
        </div>
        <div class="l-value hk-flex">
          <el-radio-group v-model="radio" @change="handleChangeStatus">
            <el-radio :label="1">主动访问</el-radio>
            <el-radio :label="2">被动访问</el-radio>
          </el-radio-group>
          <div class="icon-list">
            <span v-for="(item, index) in iconList" :key="item.title + index">
              <i class="icon" :style="{ backgroundColor: item.color }" />
              {{ item.title }}
            </span>
          </div>
        </div>
        <el-row :gutter="20" class="things" >
          <div class="empty-box" v-show="unIntAddress">暂无数据</div>
          <BarChartInternetAddress v-show="!unIntAddress" ref="internetAddressBarRef" />
        </el-row>
      </div>
      <div class="right">
        <div class="con-title">
          <span class="title">网络访问协议统计</span>
          <div>
            <el-select v-model="agreeDateType" size="mini" placeholder="近一周" @change="changeTime('netAgreement')">
              <el-option v-for="i in dateSel" :key="i.value" :label="i.label" :value="i.value" />
            </el-select>
            <el-date-picker
              v-if="agreeDateType == '4'"
              v-model="agreePickTime"
              size="mini"
              type="daterange"
              clearable
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              style="margin-left: 10px"
              @change="changeTime('netAgreement')" />
          </div>
        </div>
        <div class="l-value" style="text-align: right">
          <div class="icon-list">
            <span v-for="(item, index) in agreeIconList" :key="item.title + index">
              <i class="icon" :style="{ backgroundColor: item.color }" />
              {{ item.title }}
            </span>
          </div>
        </div>
        <el-row :gutter="20" class="things">
          <div class="empty-box" v-show="unNetworkApp">暂无数据</div>
          <BarChartInternetTotal v-show="!unNetworkApp" ref="internetTotalBarRef" />
        </el-row>
      </div>
    </div>
    <div class="configuration-situation" style="display: none">
      <div class="left">
        <div class="con-title">
          <span>网络访问流量情况（上行）</span>
          <div>
            <el-select v-model="usbDateType" size="mini" placeholder="近一周" @change="changeTime">
              <el-option v-for="i in dateSel" :key="i.value" :label="i.label" :value="i.value" />
            </el-select>
            <el-date-picker
              v-if="usbDateType == '4'"
              v-model="usbPickTime"
              size="mini"
              type="daterange"
              clearable
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              style="margin-left: 10px"
              @change="changeTime" />
          </div>
        </div>
        <div class="l-value" style="text-align: right">
          <div class="icon-list">
            <span v-for="(item, index) in flowList" :key="item.title + index">
              <i class="icon" :style="{ backgroundColor: item.color }" />
              {{ item.title }}
            </span>
          </div>
        </div>
        <el-row :gutter="20" class="things">
          <LineChartFlow ref="LineChartUpRef" />
        </el-row>
      </div>
      <div class="right">
        <div class="con-title">
          <span class="title">网络访问流量情况（下行）</span>
          <div>
            <el-select v-model="usbDateType" size="mini" placeholder="近一周" @change="changeTime">
              <el-option v-for="i in dateSel" :key="i.value" :label="i.label" :value="i.value" />
            </el-select>
            <el-date-picker
              v-if="usbDateType == 'custom'"
              v-model="usbPickTime"
              size="mini"
              type="daterange"
              clearable
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              style="margin-left: 10px"
              @change="changeTime" />
          </div>
        </div>
        <div class="l-value" style="text-align: right">
          <div class="icon-list">
            <span v-for="(item, index) in flowList" :key="item.title + index">
              <i class="icon" :style="{ backgroundColor: item.color }" />
              {{ item.title }}
            </span>
          </div>
        </div>
        <el-row :gutter="20" class="things">
          <LineChartFlow ref="LineChartDownRef" />
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import BarChartInternetAddress from './BarChartInternetAddress'
import BarChartInternetTotal from './BarChartInternetTotal'
import LineChartFlow from './LineChartFlow'
import { software } from '@/api/dispose/userPortrait'
import { mapState } from 'vuex'
import { networkAddress, networkAppProtocol } from '@/api/entityPortrait'

export default {
  components: {
    BarChartInternetAddress,
    BarChartInternetTotal,
    LineChartFlow,
  },
  props: {
    ip: {
      type: String,
      default() {
        return ''
      },
    },
  },
  data() {
    return {
      total: 0,
      updateTime: this.moment().format('lll'),
      // 表格数据
      // 配置情况数组
      configArr: [],
      queryParams: {
        current: 1,
        size: 10,
      },
      intDateType: '2',
      // 时间选择
      dateSel: [
        {
          label: '近一日',
          value: '1',
        },
        {
          label: '近一周',
          value: '2',
        },
        {
          label: '近一月',
          value: '3',
        },
        {
          label: '自定义',
          value: '4',
        },
      ],
      intPickTime: '',
      agreePickTime: '',
      agreeDateType: '2',
      usbDateType: '',
      usbPickTime: '',
      //  usb按钮
      btnObjs: [
        { name: '涉密专用存储介质', count: 10 },
        { name: '通用USB介质', count: 10 },
        { name: 'USB外设', count: 10 },
        { name: '其他介质', count: 10 },
      ],
      activeIndex: 0,
      radio: 1,
      iconList: [
        { title: 'HTTP', color: '#5c7bef' },
        { title: 'FTP', color: '#6ecfa3' },
        { title: '未知', color: '#fa9b37' },
      ],
      agreeIconList: [
        { title: 'FTP', color: '#5c7bef' },
        { title: 'SSH', color: '#6ecfa3' },
        { title: 'HTTP', color: '#fa9b37' },
      ],
      flowList: [
        { title: '置信区间上线', color: '#5c7bef' },
        { title: '置信区间下线', color: '#6ecfa3' },
        { title: '访问流量', color: '#fa9b37' },
      ],
      initiativeResult: {},
      passiveResult: {},
      // 网络访问地址数据是否为空
      unIntAddress: false,
      // 网络访问协议统计数据是否为空
      unNetworkApp:false
    }
  },
  computed: {
    ...mapState({
      assetsObj: (state) => state.portrait.assetsObj,
    }),
  },
  mounted() {
    setTimeout(() => {
      this.getIntAddressData()
      this.getNetAgreementData()
    }, 500)
  },
  watch: {
    ip: {
      handler(newValue) {
        if (newValue) {
          this.getIntAddressData()
          this.getNetAgreementData()
        }
      },
      immediate: false,
      deep: true,
    },
  },
  methods: {
    // 改变时间
    changeTime(type) {
      if (type == 'netAddress') {
        this.getIntAddressData()
      } else if (type == 'netAgreement') {
        this.getNetAgreementData()
      }
    },
    //  获取网络访问地址数据
    getIntAddressData() {
      if (this.intDateType === '4' && this.intPickTime.length === 0) return
      else if (this.intDateType !== '4') {
        this.intPickTime = []
      }
      const startTime = this.intPickTime[0] || ''
      const endTime = this.intPickTime[1] || ''
      networkAddress({ ip: this.ip, searchType: this.intDateType, startTime, endTime }).then((res) => {
        // initiativeResult 主动访问数据    passiveResult 被动访问数据
        this.initiativeResult = res.initiativeResult
        this.passiveResult = res.passiveResult
        let echartData = null
        if (this.radio == 1) {
          echartData = this.setData(this.initiativeResult, 'netAddress')
        } else {
          echartData = this.setData(this.passiveResult, 'netAddress')
        }
        if (echartData.yAxisData.length == 0) {
          this.unIntAddress = true
        } else {
          this.unIntAddress = false
        }
        this.$refs.internetAddressBarRef.getData(echartData)
      })
    },
    //  获取网络访问协议数据
    getNetAgreementData() {
      if (this.agreeDateType === '4' && this.agreePickTime.length === 0) return
      else if (this.agreeDateType !== '4') {
        this.agreePickTime = []
      }
      const startTime = this.agreePickTime[0] || ''
      const endTime = this.agreePickTime[1] || ''
      networkAppProtocol({ ip: this.ip, searchType: this.agreeDateType, startTime, endTime }).then((res) => {
        let echartData = this.setData(res, 'agreement')
        if(echartData.yAxisData.length==0){
          this.unNetworkApp=true
        }else{
          this.unNetworkApp=false
        }
        this.$refs.internetTotalBarRef.getData(echartData)
      })
    },
    // 转换数据
    setData(params, type) {
      let yAxisData = Object.keys(params)
      let seriesData = null
      if (type == 'netAddress') {
        seriesData = {
          HTTP: [],
          FTP: [],
          OTHER: [],
        }
      } else {
        seriesData = {
          FTP: [],
          SSH: [],
          HTTP: [],
        }
      }
      if (yAxisData && yAxisData.length > 0) {
        if (type == 'netAddress') {
          yAxisData.forEach((i) => {
            seriesData.HTTP.push(params[i].HTTP)
            seriesData.FTP.push(params[i].FTP)
            seriesData.OTHER.push(params[i].OTHER)
          })
        } else {
          yAxisData.forEach((i) => {
            seriesData.FTP.push(params[i].FTP)
            seriesData.SSH.push(params[i].SSH)
            seriesData.HTTP.push(params[i].HTTP)
          })
        }
      }
      return { yAxisData, seriesData }
    },

    //  切换被动主动状态
    handleChangeStatus() {
      let echartData = null
      if (this.radio == 1) {
        echartData = this.setData(this.initiativeResult, 'netAddress')
      } else {
        echartData = this.setData(this.passiveResult, 'netAddress')
      }
      if (echartData.yAxisData.length == 0) {
          this.unIntAddress = true
        } else {
          this.unIntAddress = false
        }
      this.$refs.internetAddressBarRef.getData(echartData)
    },

    // 改变usb按钮
    handleChangeBtn(index) {
      this.activeIndex = index
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-table__body-wrapper {
  overflow-y: auto !important;
}
.configuration-situation {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  .empty-box{
    height:300px;
    width:100%;
    text-align: center;
    line-height: 300px;
    color:#909399;
  }
  .left {
    width: calc(50% - 20px);
    background: #fff;
    padding: 20px;
    margin-right: 20px;
  }
  .right {
    width: 50%;
    background: #fff;
    padding: 20px;
    display: flex;
    flex-direction: column;
    &::v-deep {
      .targetTable {
        flex: 1;
        padding-bottom: 0;
        overflow: auto;
        .el-table {
          margin-top: 15px;
        }
      }
    }
  }
  .con-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    .reset {
      font-size: 12px;
      color: #4b6eef;
      font-weight: 400;
      cursor: pointer;
    }
  }
  .l-value {
    margin: 20px 0 0;
    justify-content: space-between;
    .icon-list {
      > span {
        margin-left: 10px;
      }
      .icon {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin-right: 5px;
        vertical-align: middle;
      }
    }
  }
  .little-word {
    margin-left: 6px;
    color: #8c8c8c;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .things {
    display: flex;
    .targetTable {
      height: 400px;
    }
    .thing {
      margin-right: 10px;
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      &:last-of-type {
        margin-right: 0;
      }
      .t-title {
        background: rgba(243, 245, 252, 0.5);
        padding: 10px 20px;
        color: #4b6eef;
        border-bottom: 1px solid #e5e5e5;
      }
      .t-bottom {
        flex: 1;
        padding: 20px 10px;
        .el-row {
          margin-bottom: 10px;
        }
      }
    }
  }
  .overview {
    margin-top: -15px;
    text-align: right;
    span {
      margin-left: 20px;
      display: inline-flex;
      align-items: center;
      i {
        font-style: normal;
        font-size: 24px;
        color: #fa541c;
        text-align: center;
        font-weight: 400;
      }
      &:nth-of-type(2) {
        i {
          color: #4b6eef;
        }
      }
    }
  }
}
::v-deep {
  .el-col {
    padding: 0 !important;
    margin: 5px 0;
  }
  .cell {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pagination-container {
    // height: 32px;
    // margin-top: -8px;
  }
}
</style>
